<template>
  <div>
    <KDialog v-model:showDialog="upload.show">
      <template #header>
        <div style="font-size: 20px; font-family: 'Roboto Slab', serif">
          上传作业 UPLOAD
        </div>
      </template>
      <div align="center">
        <div>
          <el-scrollbar height="360px">
            <upload v-if="upload.show"
              :homeworkID="upload.homeworkID"
              :type="upload.type"
            ></upload>
          </el-scrollbar>
        </div>
      </div>
    </KDialog>

    <section>
      <br />
      <KTitle3>未完成的作业 Not Finished</KTitle3>
      <br />
      <div
        v-if="joinedHomeworkNotFinished.homework_num == 0"
        style="min-height: 1000px"
      >
        <el-empty description="NB，你已经完成了所有作业！" :image-size="200" />
      </div>

      <div v-else style="min-height: 1100px">
        <div v-for="c in joinedHomeworkNotFinished.homework" :key="c.ID">
          <KCard style="margin: 40px; color: black">
            <template #header>
              <div style="display:flex;justify-content: space-between;}">
                <div
                  class="MyFont"
                  style="font-size: 22px; padding: 20px 10px 0px"
                >
                  <span
                    style="
                      background-color: var(--mainColor);
                      color: white;
                      padding: 8px;
                      border-radius: 0.5em;
                    "
                    >HW</span
                  >
                  &ensp; {{ c.Name }}
                </div>
                <div>
                  <div style="display: flex">
                    <p
                      :class="`icon solid fa-hand-${
                        c.CanSubmitAfterEnd ? 'peace' : 'rock'
                      }`"
                      :style="`font-size:15px;width: fit-content;border-radius:1.5em;color:white;padding:8px 18px;
                        margin:20px 0;
                        background-color:${
                          c.CanSubmitAfterEnd ? '#3b5fec' : '#e59617'
                        }`"
                    >
                      &ensp;
                      {{ c.CanSubmitAfterEnd ? "可以延期" : "不可以延期" }}
                    </p>
                  </div>
                </div>
              </div>

              <img
                style="margin-left: 15px"
                :src="`https://img.shields.io/badge/Homework ID-${c.ID}-green`"
              />
              <img
                style="margin-left: 15px"
                :src="`https://img.shields.io/badge/DDL-${makePrettyTime(c.EndTime).split(' ')[0]}-orange`"
              />
              <img style="margin-left: 15px"
              :src="`https://img.shields.io/badge/Type-${c.Type}-blue`"
              />
            </template>
            <div style="display:flex;justify-content: space-between;">
              <div
                class="MyFont item-list"
                style="font-size: 16px; padding: 10px"
              >
                <div class="icon solid fa-leaf">&ensp;提交类型:&ensp;{{ c.Type }}</div>
                <div class="icon solid fa-closed-captioning">
                  &ensp;作业描述:&ensp;
                  {{ c.Desc ? `「${c.Desc}」` : "无" }}
                </div>
                <div class="icon solid fa-object-group">
                  &ensp;所属科目:&ensp;
                  {{ c.Subject }}
                </div>
                <div class="icon solid fa-hourglass-start">
                  &ensp;创建时间:&ensp;
                  {{ makePrettyTime(c.CreatedAt) }}
                </div>
                <div class="icon solid fa-stopwatch">
                  &ensp;结束时间:&ensp;
                  {{ makePrettyTime(c.EndTime) }}
                </div>
                <div class="icon solid fa-id-badge">
                  &ensp;创建人:&ensp;
                  {{ c.Owner.Name }}
                </div>
              </div>
              <div style="display:flex;padding : 20px;" align="right">
                <button
                  class="button primary icon solid fa-table"
                  style="margin: auto auto 0;"
                  @click="upload.handle(c.ID, c.Type)"
                  >提交</button>
              </div>
            </div>
          </KCard>
        </div>
      </div>
    </section>

    <section
      v-if="joinedHomeworkNotFinished.homework_num > 0"
      align="center"
      style="font-family: 'Roboto Slab', serif"
    >
      <KPagination
        v-model:cur_page="joinedHomeworkNotFinished.cur_page"
        :total="joinedHomeworkNotFinished.total_pages"
        @click="joinedHomeworkNotFinished.move"
      ></KPagination>
    </section>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ElNotification, ElLoading } from "element-plus";
import { reactive, computed, onMounted } from "vue";
import { makePrettyTime } from "@/hook/format";
import upload from "@/pages/MyHomeWork/upload"

export default {
  name: "MyHomeWork",
  components : {
    upload
  },
  setup() {
    setTimeout(() => {
      ElNotification({
        title: "我想说",
        message: "请注意你的DDL!",
      });
    }, 500);
    let store = useStore();

    function updateData() {
      const loading = ElLoading.service({
        lock: true,
        text: "正在拉取您的信息中...",
        background: "rgba(0, 0, 0, 0.8)",
        customClass: "MyLoading",
      });

      store.dispatch("homeworkNotFinishedNum").then(function () {
        if (store.state.homework.joinedHomeworkNotFinishedNum) {
          let queryIndice = joinedHomeworkNotFinished.cur_page_index;
          let start = queryIndice[0];
          let end = queryIndice[queryIndice.length - 1] + 1;
          // 最后一条需要在总条目之内
          end = Math.min(end, store.state.homework.joinedHomeworkNotFinishedNum);
          // 最后一条需要在100条请求条目之内
          end = Math.min(end, start + 100);

          console.log(queryIndice)
          store
            .dispatch("homeworkNotFinished", { start, end })
            .then(function () {
              loading.close();
              if (store.state.homework.joinedHomeworkNotFinished.length > 0) {
              } else {
                ElNotification({
                  title: "Oops",
                  message: "拉去初始化列表失败，错误信息: " + store.state.error,
                });
              }
            });
        } else {
          loading.close();

          let message;
          if (store.state.homework.joinedHomeworkNotFinished == 0) {
          } else {
            message = "初始化失败！错误信息: " + store.state.error;
            ElNotification({ title: "Oops", message: message });
          }
          return;
        }
      });
    }

    onMounted(updateData);

    let joinedHomeworkNotFinished = reactive({
      item_num: 10,
      homework: computed(() => store.state.homework.joinedHomeworkNotFinished),
      homework_num: computed(() => store.state.homework.joinedHomeworkNotFinishedNum),
      total_pages: computed(() =>
        Math.ceil(
          joinedHomeworkNotFinished.homework_num /
            joinedHomeworkNotFinished.item_num
        )
      ),
      cur_page: 1,
      last_page: undefined,
      cur_page_index: computed(() => {
        let indexes = [],
          start =
            (joinedHomeworkNotFinished.cur_page - 1) *
            joinedHomeworkNotFinished.item_num;
        for (
          let i = start;
          i <
          Math.min(
            start + joinedHomeworkNotFinished.item_num,
            joinedHomeworkNotFinished.homework_num
          );
          ++i
        ) {
          indexes.push(i);
        }
        return indexes;
      }),
      move() {
        if (
          joinedHomeworkNotFinished.last_page != joinedHomeworkNotFinished.cur_page
        )
          updateData();
        joinedHomeworkNotFinished.last_page =
          joinedHomeworkNotFinished.cur_page;
      },
    });

    let upload = reactive({
      show : false,
      homeworkID : undefined,
      type : undefined,
      handle(homeworkID, type) {
        upload.homeworkID = homeworkID
        upload.type = type
        upload.show = true
      }
    })

    return {
      joinedHomeworkNotFinished,
      makePrettyTime,
      upload
    };
  },
};
</script>

<style>
.item-list div {
  padding: 1px 10px 15px;
  line-height: 10px;
  margin: 1px 10px 12px;
  font-size: 16px;
  font-family: "Roboto Slab";
}
</style>